<div id="content">
  <div class="row s_page_title" *ngIf="pageType === 'new'">
    <sa-big-breadcrumbs [items]="['系统基础管理', '公司信息管理', '新增公司']" icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>
  <div class="row s_page_title" *ngIf="pageType === 'updata'">
    <sa-big-breadcrumbs [items]="['系统基础管理', '公司信息管理', '编辑公司']" icon="fa fa-list"
      class="col-xs-12 col-sm-7 col-md-7 col-lg-4"></sa-big-breadcrumbs>
  </div>
  <div class="s_page_wrap">
    <div class="page-header">
      <h1 class="page_detail_title">{{ page_title }}公司</h1>
    </div>
    <div class="row" style="margin-top: 5px">
      <div class="col-xs-12">
        <form name="companyForm" id="companyForm" class="form-horizontal" novalidate="novalidate"
          [saBootstrapValidator]="validatorOptions">
          <div class="col-sm-12" style="padding: 0 2%">
            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                省份
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <select class="form-control" [(ngModel)]="page.provinceId"
                    (change)="provinceChange($event.target.value)" name="provinceId" placeholder="请选择"
                    autocomplete="address-level1">
                    <option value="">请选择</option>
                    <option *ngFor="let item of provinceNameArr" [value]="item.id">{{ item.areaName }}</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                城市
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <select class="form-control" [(ngModel)]="page.cityId" (change)="cityChange($event.target.value)"
                    name="cityId" placeholder="请选择" autocomplete="address-level2">
                    <option value="">请选择</option>
                    <option *ngFor="let item of cityNameArr" [value]="item.id">{{ item.areaName }}</option>
                  </select>
                </div>
              </div>
            </div>

            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                市区
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <select class="form-control" [(ngModel)]="page.townId" (change)="townChange($event.target.value)"
                    name="townId" placeholder="请选择" autocomplete="address-level3">
                    <option value="">请选择</option>
                    <option *ngFor="let item of townNameArr" [value]="item.id">{{ item.areaName }}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>
          <div class="col-sm-12" style="padding: 0 2%">
            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                公司名称
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <input class="form-control" name="companyName" type="text" [attr.companyId]="rowId"
                    [(ngModel)]="page.companyName" placeholder="公司名称" />
                </div>
                <div class="" (click)="isOpenCycleClick()" style="padding-top: 5px">
                  <span class="el-checkbox__inner" [ngClass]="{ 'is-checked': isOpenCycle }"></span>
                  <span style="margin-left: 5px">启用服务到期提醒功能</span>
                </div>
              </div>
            </div>

            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">父级公司</label>
              <div class="col-sm-8">
                <sa-company-tree companyTreeId="companyTree" [root]="true" [Height]="32"
                  [inputName]="'parentCompanyName'" [companyNameValue]="page.parentName"
                  [companyIdValue]="page.parentId" (companySelected)="companySelected($event)"></sa-company-tree>
                <div class="" (click)="synchroParentSelectClick()" style="padding-top: 2px">
                  <span class="el-checkbox__inner" [ngClass]="{ 'is-checked': synchroParentSelect }"></span>
                  <span style="margin-left: 5px">服务周期同步到子公司</span>
                </div>
              </div>
            </div>

            <div class="form-group col-sm-4">
              <label class="control-label col-sm-4 no-padding-right">
                行业类型
                <sup>*</sup>
              </label>
              <div class="col-sm-8">
                <div class="clearfix">
                  <select class="form-control" [(ngModel)]="page.businessType"
                    (change)="businessTypeChange($event.target.value)" name="businessType" placeholder="请选择"
                    autocomplete="businessType-level1">
                    <option value="">请选择</option>
                    <option *ngFor="let item of businessTypeList" [value]="item.value">{{ item.label }}</option>
                  </select>
                </div>
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">
              首次安装(服)
              <sup>*</sup>
            </label>
            <div [class]="[pageType === 'updata' ? 'col-sm-6' : 'col-sm-9']">
              <div class="clearfix">
                <input class="form-control" id="firstRenewalCycle" [(ngModel)]="page.firstRenewalCycle"
                  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" name="firstRenewalCycle" type="text"
                  placeholder="首次安装服务周期（月）" autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">
              首次安装(保)
              <sup>*</sup>
            </label>
            <div [class]="[pageType === 'updata' ? 'col-sm-6' : 'col-sm-9']">
              <div class="clearfix">
                <input class="form-control" id="firstWarrantyCycle" [(ngModel)]="page.firstWarrantyCycle"
                  onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" name="firstWarrantyCycle" type="text"
                  placeholder="首次安装保修周期（月）" autocomplete="off" />
              </div>
            </div>
          </div>

          <div id="cycle" style="display: none">
            <div class="form-group col-sm-6" *ngIf="pageType === 'new'">
              <label class="control-label col-sm-3 no-padding-right">
                次年续费(服)
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input class="form-control" disabled id="renewalCycle" [(ngModel)]="page.renewalCycle"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" name="renewalCycle" type="text"
                    placeholder="次年续费服务周期（月）" autocomplete="off" />
                </div>
              </div>
            </div>
            <div class="form-group col-sm-6 group_relative" *ngIf="pageType === 'updata'">
              <label class="control-label col-sm-3 no-padding-right">
                次年续费(服)
                <sup>*</sup>
              </label>
              <div class="col-sm-6">
                <div class="clearfix">
                  <input class="form-control" disabled id="renewalCycle" [(ngModel)]="page.renewalCycle"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" name="renewalCycle" type="text"
                    placeholder="次年续费服务周期（月）" autocomplete="off" />
                </div>
              </div>
              <div class="col-sm-3 checked_center" (click)="renewChildSelectClick()"
                style="padding-left: 8px; padding-top: 8px">
                <span class="el-checkbox__inner" [ngClass]="{ 'is-checked': renewChildSelect }"></span>
                <span style="margin-left: 5px">是否同步子级</span>
              </div>
            </div>
            <div class="form-group col-sm-6 group_relative" *ngIf="pageType === 'new'">
              <label class="control-label col-sm-3 no-padding-right">
                次年续费(保)
                <sup>*</sup>
              </label>
              <div class="col-sm-9">
                <div class="clearfix">
                  <input class="form-control" disabled id="warrantyCycle" [(ngModel)]="page.warrantyCycle"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" name="warrantyCycle" type="text"
                    placeholder="次年续费保修周期（月）" autocomplete="off" />
                </div>
              </div>
            </div>
            <div class="form-group col-sm-6 group_relative mb30" *ngIf="pageType === 'updata'">
              <label class="control-label col-sm-3 no-padding-right">
                次年续费(保)
                <sup>*</sup>
              </label>
              <div class="col-sm-6">
                <div class="clearfix">
                  <input class="form-control" disabled id="warrantyCycle" [(ngModel)]="page.warrantyCycle"
                    onkeyup="value=value.replace(/^(0+)|[^\d]+/g,'')" name="warrantyCycle" type="text"
                    placeholder="次年续费保修周期（月）" autocomplete="off" />
                </div>
              </div>
              <div class="col-sm-3 checked_center" (click)="warrantyChildSelectClick()"
                style="padding-left: 8px; padding-top: 8px">
                <span class="el-checkbox__inner" [ngClass]="{ 'is-checked': warrantyChildSelect }"></span>
                <span style="margin-left: 5px">是否同步子级</span>
              </div>
            </div>
          </div>
          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">
              签单单位
              <sup *ngIf="!page.parentId && page.businessType === '01'">*</sup>
            </label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.signUnit" name="signUnit" type="text"
                  placeholder="签单单位" />
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">联系电话</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.tel" name="tel" type="text" placeholder="联系电话" />
              </div>
            </div>
          </div>

          <!-- 新需求 -->
          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">销售归属</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" list="sale-options" name="saleAscription" type="text"
                  [(ngModel)]="page.saleAscription" placeholder="销售归属" autocomplete="off" />
                <datalist id="sale-options">
                  <option value="苗少光"></option>
                  <option value="刘博"></option>
                  <option value="谢海川"></option>
                  <option value="谢春红"></option>
                  <option value="何婷婷"></option>
                  <option value="王海红"></option>
                  <option value="张永华"></option>
                  <option value="姜瑜"></option>
                  <option value="王迪"></option>
                  <option value="潘素仟"></option>
                </datalist>
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">地址</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" name="address" type="text" [(ngModel)]="page.address" placeholder="详细地址"
                  autocomplete="off" />
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">经度</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.lng" name="lng" type="text" placeholder="经度" />
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">纬度</label>
            <div class="col-sm-6">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.lat" name="lat" type="text" placeholder="纬度" />
              </div>
            </div>
            <button id="positionBtn" type="button" class="btn btn-primary" style="padding: 4px" (click)="showMap()">
              地图
            </button>
          </div>
          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">半径(米)<sup>*</sup></label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.radius" name="radius" type="text" placeholder="请输入半径(米)"
                  autocomplete="off" />
              </div>
            </div>
          </div>
          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">映射编码</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.mappingCode" name="mappingCode" type="text"
                  placeholder="映射编码" autocomplete="off" />
              </div>
            </div>
          </div>

          <div class="form-group col-sm-6">
            <label class="control-label col-sm-3 no-padding-right">备注</label>
            <div class="col-sm-9">
              <div class="clearfix">
                <input class="form-control" [(ngModel)]="page.remark" name="remark" rows="3" cols="30"
                  placeholder="填写备注..." autocomplete="off" />
              </div>
            </div>
          </div>
          <br />
          <div class="map-box clearfix">
            <div id="baiduMap"></div>
            <sa-bmap-tools [baiduMap]="baiduMap" [isShowZoom]="true"></sa-bmap-tools>
            <div class="auto-search-bmap">
              <div id="r-result"><input type="text" id="suggestId" placeholder="请输入地址" /></div>
              <i class="fa fa-search suggestIcon" (click)="suggestSearchBtn()"></i>
              <div id="searchResultPanel" style="border: 1px solid #c0c0c0; width: 150px; height: auto; display: none">
              </div>
            </div>
            <!-- <span class="colse" id="colse" title="单击关闭地图" (click)="isShowMap = !isShowMap" style="font-size:18px;color:#000000;cursor:pointer;position:absolute;right:10px;top:8px;">X</span> -->
          </div>
          <div class="center" style="margin-top: 20px">
            <button (click)="onSubmit()" id="addBtn" class="btn btn-primary" *ngIf="page_title === '新增'">添加</button>
            <button (click)="onSubmit()" id="editBtn" class="btn btn-primary" *ngIf="page_title === '编辑'">
              保存
            </button>
            <button type="button" id="cancleBtn" (click)="goBack()" class="btn default">返回</button>
          </div>
        </form>
        <div class="rules-area">
          <div class="title">规则说明</div>
          <div class="sec-title">
            签单单位：父项目与子项目归属同一个签单单位时，子项目的签单单位可以不填写，默认继承父项目的签单单位:子项目与父项目不同属一个签单单位时，子项目才需要填写实际的签单单位。
          </div>
          <div class="sec-title">销售归属: 与签单单位同理;</div>
        </div>
        <div class="hr hr-dotted"></div>
      </div>
    </div>
  </div>
</div>